import React, { Fragment, useRef, useEffect, useState } from "react";
import {
    IonContent,
    IonHeader,
    IonButton,
    IonPage,
    IonTitle,
    IonToolbar,
    IonList,
    IonLabel,
    IonListHeader,
    IonIcon
} from '@ionic/react';

import Swiper from "swiper";
import "swiper/swiper.min.css";
import IndexStyle from "./index.module.scss";
// https://6169-ai-ce3cc3-1256086372.tcb.qcloud.la/photo/19085322835229863.jpg?sign=65095811818d57d990b06f5aa425a198&t=1641312503
const Data = [
    {
        url: "https://gw.alicdn.com/imgextra/i4/O1CN01qak0aG1IaMjHYtiuy_!!6000000000909-2-tps-400-300.png",
        activeUrl: "https://6169-ai-ce3cc3-1256086372.tcb.qcloud.la/photo/19085322835229863.jpg"
    },
    {
        url: "https://gw.alicdn.com/imgextra/i4/O1CN01qak0aG1IaMjHYtiuy_!!6000000000909-2-tps-400-300.png",
        activeUrl: "https://6169-ai-ce3cc3-1256086372.tcb.qcloud.la/photo/19085322835229863.jpg"
    },
    {
        url: "https://gw.alicdn.com/imgextra/i4/O1CN01qak0aG1IaMjHYtiuy_!!6000000000909-2-tps-400-300.png",
        activeUrl: "https://6169-ai-ce3cc3-1256086372.tcb.qcloud.la/photo/19085322835229863.jpg"
    }
]

const TopSwiperCom = (props) => {
    const swiperRef = useRef(null);
    let [Sindex, setIndex] = useState(0);
    const [ulData, setUlData] = useState(Data);
    const activeIndex = 0;

    // const config = {
    //     loop: false,
    //     on: {
    //         init: function (e) {
    //             // console.log(e, 'init',swiperRef);
    //             // if(swiperRef.current!=null){
    //             //     swiperRef.current.swiper.initialSlide=1;
    //             // }
    //         },
    //         slideChange: function (e) {
    //             console.log(e, 'change');
    //         },
    //         sliderMove: function (e, event) {
    //             console.log(e, event)
    //         },
    //         activeIndexChange: function (e, i) {
    //             // setActiveIndex(swiperRef.current.swiper.activeIndex)
    //         }
    //     }
    // };

    let swiperObj = new Swiper('.swiper-View', {
        initialSlide: Sindex,
        loop: false,
        effect: 'coverflow',
        slidesPerView: 2,
        centeredSlides: true,
        spaceBetween: 40,
        on: {
            slideChangeTransitionEnd: function () {
                console.log(this.activeIndex, activeIndex)
            }
        }
    });
    swiperObj.on("slideChangeTransitionStart", function () {
        let nowIndex = this.activeIndex;
        setIndex(nowIndex);
    })
    return (
        <>
            <div className={`${[IndexStyle.swiperView].join(" ")}`}>
                <div ref={swiperRef} className="swiper-View">
                    <div className={`${['swiper-wrapper'].join(" ")}`}>
                        {
                            ulData.map((item, index) => {
                                return (
                                    <div
                                        className={`${['swiper-slide',
                                            IndexStyle.li, Sindex == index ? IndexStyle.activeLi : IndexStyle.normaLi]
                                            .join(" ")}`}
                                        key={"swiper_" + index}
                                    >
                                        <div className={`${[IndexStyle.changeLi].join(" ")}`}>
                                        <div className={`${[IndexStyle.imgView].join(" ")}`}>
                                                <img src={item.activeUrl} alt="" />
                                            </div >
                                            <div className={`${[IndexStyle.imgView, Sindex == index ? IndexStyle.changeLiImg_active : IndexStyle.changeLiImg_normal].join(" ")}`}>
                                                <img src={item.url} alt="" />
                                            </div >
                                            
                                        </div>
                                    </div>

                                )
                            })
                        }
                    </div>
                </div>
            </div>
        </>
    )
}
export default TopSwiperCom;